<!-- 搜索页面 -->
<template>
	<view class="search-position">
		<!-- 搜索框 -->
		<view class="search-input">
			<image src="/static/images/search.png" mode="aspectFit"></image>
			<input type="text" :focus="true" v-model="searchValue" confirm-type='搜索' @confirm="search">
		</view>
		<view @click="search">搜索</view>
	</view>
	
	<!-- 搜索历史 -->
	<block v-if="history.length > 0 && show == true">
		<view class="history">
			<text>历史记录</text>
			<image src="/static/images/delete.svg" mode="aspectFit" @click="delRecord"></image>
		</view>
		<view class="history-text">
			<text v-for="(item,index) in history" :key='index' @click="historySearch(item)">{{item}}</text>
		</view>
	</block>
	
	<!-- 商品展示组件 -->
	<Card :card="card">
		<view class="card-title" v-if="card.length>0">
			全部搜索结果
		</view>
	</Card>
	
	<!-- 上拉加载提示 -->
	<view class="loading-height">
		<Loading v-if="loading"></Loading>
	</view>
	
	<!-- 没有数据的提示 -->
	<view class="tips" v-if="card.length == 0 && show === false">没有搜索结果</view>

</template>

<script setup>
	import { ref, onMounted, reactive, toRefs } from 'vue'
	import Card from '@/components/card-goods.vue'
	import Loading from '@/components/loading.vue'
	import { onReachBottom } from '@dcloudio/uni-app'
	import {FeedBack} from "@/public/package-js/feedBack.js"
	
	const data = reactive({
		searchValue: '', // 输入的搜索关键字
		card: [], // 存储商品的列表
		show: true, // 历史记录是否展示
		loading: false, // 上拉提示小圆圈
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
		history:[]  // 存储历史记录
	})
	const { searchValue, card, show, loading,history } = toRefs(data)

	// 1、点击开始搜索
	function search() {
		// 本地缓存搜索历史
		// 当用户搜索输入的不是全部空格的时候
		if (data.searchValue.split(" ").join("").length != 0) {
			// 每次存储历史记录之前先取出来 如果取不到数据，就为 false，record_array=[]
			let record_array = uni.getStorageSync('searchValue') || [] 
			
			// 将搜索的值去除首尾空格，装进数组的第一位
			data.searchValue  = data.searchValue.trim()
			record_array.unshift(data.searchValue)
			
			// 向本地缓存数据
			uni.setStorageSync('searchValue', record_array)
			
			// 点击开始搜索的时候，将pageNum改为 0,商品数组置空
			data.card = []
			data.pageNum = 0
			fuzzyQuery(data.pageNum)
		}else{
			new FeedBack("请输入有效内容","none").toast()
		}
	}

	// 1-1 数据库模糊查询，根据商品分类和商品标题模糊查询
	const db = uni.cloud.database()
	const _ = db.command
	async function fuzzyQuery(pageNum) {
		// 设置模糊字段匹配
		let query = _.or([  // or 表示或者
			{
				category: db.RegExp({ //构造正则表达式
					regexp: data.searchValue, 
					options: 'i', //大小写不敏感
				})
			},
			{
				goods_title: db.RegExp({
					regexp: data.searchValue,
					options: 'i',
				})
			}
		])
		
		let skip = pageNum * 10
		const res = await db.collection('goods').where(query).limit(10).skip(skip).get()
		// console.log(res)
		data.show = false // 不展示历史记录
		data.card = [...data.card, ...res.data]
	}

	// 2、上拉加载
	onReachBottom(async () => {
		data.loading = true
		data.pageNum++
		await fuzzyQuery(data.pageNum)
		data.loading = false
	})

	//3、 取出本地缓存搜索历史
	onMounted(() => {
		let key = uni.getStorageSync('searchValue')
		// 对取出的数据进行去重
		let res = [...new Set(key)]
		data.history = res
	})

	// 4、搜索历史触发搜索
	function historySearch(key) {
		data.searchValue = key
		// 置空，避免数组中存在上次搜索的数据
		data.card = []
		data.pageNum = 0
		fuzzyQuery(data.pageNum)
	}

	// 5、清空搜索历史
	function delRecord() {		
		uni.showModal({
			title: '提示',
			content: '确定要删除所有历史记录吗',
			success: function (res) {
				if (res.confirm) {
					uni.removeStorageSync('searchValue')
					data.history = []
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
</script>

<style scoped>
	.search-position {
		margin: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.search-position view:nth-child(2) {
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 30rpx;
	}

	.search-input {
		display: flex;
		flex-direction: row;
		flex: 1;
		position: relative;
	}

	.search-input image {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		left: 20rpx;
		align-self: center;
	}

	.search-input input {
		background-color: #f4f4f4;
		width: 100%;
		height: 70rpx;
		padding: 0 20rpx 0 75rpx;
		border-radius: 8rpx;
	}

	/* 历史记录 */
	.history image {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.history {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.history-text {
		display: flex;
		flex-wrap: wrap;
		margin: 0 20rpx;
	}

	.history-text text {
		background-color: #f4f4f4;
		margin: 0 20rpx 20rpx 0;
		border-radius: 7rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
	}
	
	/* 传递的结构样式 */
	.card-title{
		margin: 30rpx;
		color: #c7c7c7;
	}
</style>
